<!-- 代收货款组件 -->
<template>
  <nut-popup class="paymentBox" position="bottom" closeable round :style="{ height: '45%' }" @click-close-icon="sendPaymentMsg(0)" v-model:visible="props.showRound">
    <nut-cell title="代收货款">
      <template v-slot:default>
        <span class="title">代收货款</span>
        <nut-switch v-model="collectionPayment" />
      </template>
    </nut-cell>

    <nut-cell class="ibo">
      <span class="tit">代收金额</span> <nut-input placeholder="请输入代收金额" v-model="collectionMoney" type="digit" />
      <span>元</span>
    </nut-cell>

    <nut-cell class="ibo flex_ld">
      <span class="title">返还周期</span>
      <nut-radio-group v-model="returnCycle" direction="horizontal">
        <nut-radio label="1">即日退</nut-radio>
        <nut-radio label="2">三日退</nut-radio>
        <nut-radio label="3">月结</nut-radio>
      </nut-radio-group>
    </nut-cell>

    <nut-cell class="ibo flex_ld">
      <template v-slot:default>
        <span class="title">返还方式</span>
        <span @click="showReturnTypeModel = true">{{ returnTypeStr }}</span>
        <IconFont name="rect-right"></IconFont>
      </template>
    </nut-cell>

    <nut-cell class="btn_box">
      <view class="flex_ld"><span>手续费</span> <span class="font_blue">￥{{ serverPrice }}元</span></view>
      <nut-button class="button" block type="primary" color="#0966ff" @click="sendPaymentMsg(1)">确定</nut-button>
    </nut-cell>
  </nut-popup>

  <!-- 返还方式抽屉 -->
  <ReturnTypeModel @sendRuturnTypeMsg="closeReturnTypeModel" :showRound="showReturnTypeModel" :phone="props.phone"  />
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import Taro, { useDidShow } from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro'
import ReturnTypeModel from './returnTypeModel.vue' // 返还方式抽屉组件

const showFlag = ref(true)

useDidShow(() => {
  showFlag.value = props.showRound
})

const props = defineProps<{
  showRound: boolean,
  phone:string, // 发货人手机号
}>()

const emit = defineEmits(['sendPaymentMsg'])

const collectionPayment = ref(true) // 0 不代收 1 代收
const collectionMoney = ref('1') // 代收金额

const returnCycle = ref('1') //  返还周期 1即日 2三日 3月结

/* 返还方式抽屉 start */

const returnTypeStr = ref('请选择返还方式')
const showReturnTypeModel = ref(false) // 返还方式抽屉弹窗
const returnType = ref(); // 返还方式
const accountName = ref('') // 收款人
const bankName = ref('') // 开户行
const bankSubName = ref('') // 银行类别
const accountNo = ref('') // 银行卡号
const phone = ref('') // 微信支付宝返还
const btcaId = ref('') // 会员卡返还卡号

// 关闭弹窗将子组件数据取出
const closeReturnTypeModel = (obj) => {
  // console.log(obj, '子组件传递来的返还方式信息')
  showReturnTypeModel.value = false
  if (obj) {
    if(obj.returnType == 1){
      returnType.value = 1;
      btcaId.value = obj.btcaId;
      returnTypeStr.value = '会员卡';
    }
    else if (obj.returnType == 2) {
      returnType.value = 2;
      accountName.value = obj.accountName; // 收款人
      accountNo.value = obj.accountNo; // 银行卡号
      bankName.value = obj.bankName; // 开户行
      bankSubName.value = obj.bankSubName; // 银行类别
      returnTypeStr.value = '银行卡';
    } else if (obj.returnType == 3) {
      returnType.value = 3;
      phone.value = obj.phone;
      returnTypeStr.value = '微信';
    } else if (obj.returnType == 5) {
      returnType.value = 5;
      phone.value = obj.phone;
      returnTypeStr.value = '支付宝';
    } else if (obj.returnType == 4) {
      returnType.value = 4;
      returnTypeStr.value = '现金';
    }
  }
}

/* 返还方式抽屉 end */

// 手续费计算
let serverPrice = computed(() => {
  // console.log(collectionMoney.value, '代收金额')
  let sum = 0
  if (returnCycle.value == '1') {
    if (Number(collectionMoney.value) <= 3000) {
      sum = 30
    } else if (Number(collectionMoney.value) > 3000 && Number(collectionMoney.value) <= 20000) {
      sum = Number(((Number(collectionMoney.value) * 3) / 1000).toFixed(0))
    } else if (Number(collectionMoney.value) > 20000) {
      sum = 200
    }
  } else if (returnCycle.value == '2') {
    if (Number(collectionMoney.value) <= 2000) {
      sum = 5
    } else if (Number(collectionMoney.value) > 2000 && Number(collectionMoney.value) <= 10000) {
      sum = Number(((Number(collectionMoney.value) * 3) / 1000).toFixed(0))
    } else if (Number(collectionMoney.value) > 10000) {
      sum = 30
    }
  } else {
    sum = 0
  }
  return sum
})

// 监听是否代收货款
watch(
  () => collectionPayment,
  () => {
    // 如果不代收
    if (collectionPayment.value == false) {
      // 1.关闭弹窗
      // 将所有置0回传
      const sendData = {
        collectionPayment: 0,
        serverPrice: 0,
        paymentStr: '不代收货款'
      }
      emit('sendPaymentMsg', sendData) // 关闭弹窗传递数据
    }
  },
  { deep: true }
)

const sendPaymentMsg = (flag) => {
  if (flag) {
    if (!Number(collectionMoney.value)) {
      Taro.showToast({
        icon: 'error',
        title: '代收金额不为0'
      })
      return
    }

    let paymentStr
    if (returnCycle.value == '1') {
      paymentStr = '即日退，' + collectionMoney.value + '元，' + returnTypeStr.value + '，返还'
    } else if (returnCycle.value == '2') {
      paymentStr = '三日退' + collectionMoney.value + '元，' + returnTypeStr.value + '，返还'
    } else if (returnCycle.value == '3') {
      paymentStr = '月结' + collectionMoney.value + '元，' + returnTypeStr.value + '，返还'
    }

    const sendData = {
      collectionPayment: 1, // 是否代收货款
      collectionMoney: Number(collectionMoney.value), // 代收金额
      serverPrice: Number(serverPrice.value), // 手续费
      returnType: returnType.value, // 返还方式 1 2 3 4
      accountName: accountName.value || '', // 收款人
      accountNo: accountNo.value || '', // 银行卡号
      bankName: bankName.value || '', // 开户行
      bankSubName: bankSubName.value || '', //银行类别
      phone: phone.value || '', // 手机号
      btcaId: btcaId.value || '', // 会员卡号
      paymentStr // 回显代收货款文本
    }
    // 把开关打开
    collectionPayment.value = true;
    emit('sendPaymentMsg', sendData) // 关闭弹窗传递数据
  } else {
    emit('sendPaymentMsg', null) // 关闭弹窗不传数据
  }
}

const close = () => {
  showFlag.value = false
}
</script>

<style lang="scss">
.paymentBox {
  .ibo {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .tit {
      width: 112rpx;
      font-weight: bold;
    }

    .nut-input {
      width: 498rpx;
      height: 72rpx;
      border-radius: 8rpx;
      background: #f5f5f5;
      margin: 0 24rpx;
      text-align: center;
    }
  }

  .title {
    font-weight: bold;
    margin-right: 8rpx;
  }

  .nut-tabs.vertical .nut-tabs__titles-item.active .nut-tabs__titles-item__line {
    left: 0rpx;
    width: 6rpx;
    background: #0966ff;
  }

  .nut-cell {
    margin: 0;
  }

  .nut-tab-pane {
    padding: 0;
  }

  .nut-radio-group {
    display: block;
  }

  .flex_center {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .flex_ld {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .btn_box {
    position: fixed;
    bottom: 10rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 88rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .font_blue {
      color: #0966ff;
    }

    .button {
      width: 218rpx;
      height: 72rpx;
      border-radius: 88rpx;
    }
  }

  .nut-radio__button {
    width: 210rpx;
    height: 72rpx;
    border-radius: 88rpx;
    justify-content: center;
  }

  .nut-switch {
    // background: #0966ff;
  }

  .nut-radio__button--active {
    color: #0966ff;
    font-weight: bold;
  }

  .nut-radio__button--active {
    // color: var(--nut-radio-label-font-active-color, var(--nut-primary-color, #0966ff));
    // border: 2rpx solid var(--nut-radio-label-button-border-color, var(--nut-primary-color, #0966ff));
  }

  .nut-radio__button--active::after {
    border-radius: 88rpx;
    // background-color: var(--nut-radio-label-button-background, var(--nut-primary-color, #0966ff));
  }
}
</style>
